<template>
  <div id='user'>

    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>员工管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class='option-wrap'>
      <el-button type="info" @click="dialogVisible.addUserVisible = true">新增用户
      </el-button>
      <el-button type="warning" @click="deleteBtnClick">
        &nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;</el-button>
    </div>
    <div class="gird-wrap">
      <el-table style="width: 100%" height="441" :border="true" :stripe="true" :data="dataList"
        @selection-change="selectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop='username' label="账户"></el-table-column>
        <el-table-column prop='nickName' label="姓名"></el-table-column>
        <el-table-column prop='departmentName' label="部门"></el-table-column>
        <el-table-column prop='telephoneNo' label="手机"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template scope="scope">
            <el-button @click.native.prevent="handleEdit(scope.$index,dataList)" type="primary" size="small">修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager-wrap">
      <el-pagination :current-page="1" :page-size="10" :total="page.totalCount" layout="total, prev, pager, next">
      </el-pagination>
    </div>

    <el-dialog title="新增制卡员" v-model="dialogVisible.addUserVisible">
      <table>
        <tr>
          <td class='form-label'>账户：</td>
          <td class='form-label'>
            <el-input placeholder="账户由字母和数字组成" v-model="addUserVo.username" />
          </td>
          <td class='form-label'>密码：</td>
          <td class='form-label'>
            <el-input placeholder="请输入密码" v-model="addUserVo.password" type="password" />
          </td>
        </tr>
        <tr>
          <td class='form-label'>部门：</td>
          <td class='form-label'>
            <el-select placeholder="请选择部门" :clearable="true" v-model="addUserVo.departmentId">
              <el-option v-for="item in departmentList" :label="item.name" :value="item.No" :key="item.No"></el-option>
            </el-select>
          </td>
          <td class='form-label'>姓名：</td>
          <td class='form-label'>
            <el-input placeholder="请输入姓名" v-model="addUserVo.nickName" />
          </td>
        </tr>
        <tr>
          <td class='form-label'>手机号：</td>
          <td class='form-label'>
            <el-input placeholder="请输入手机号" v-model="addUserVo.telephoneNo" />
          </td>
          <td class='form-label'>* 号码长度为11</td>
        </tr>
      </table>
      <div slot="footer">
        <el-button @click="dialogVisible.addUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserBtnClick">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改-->
    <el-dialog title="修改制卡员信息" v-model="dialogVisible.editUserVisible">
      <table>
        <tr>
          <td class='form-label'>账户：</td>
          <td class='form-label'>
            <el-input placeholder="账户由字母和数字组成" v-model="editUserVo.username" />
          </td>
          <td class='form-label'>密码：</td>
          <td class='form-label'>
            <el-input placeholder="请输入密码" v-model="editUserVo.password" type="password" />
          </td>
        </tr>
        <tr>
          <td class='form-label'>部门：</td>
          <td class='form-label'>
            <el-select placeholder="请选择部门" :clearable="true" v-model="editUserVo.departmentId">
              <el-option v-for="item in departmentList" :label="item.name" :value="item.No" :key="item.No"></el-option>
            </el-select>
          </td>
          <td class='form-label'>姓名：</td>
          <td class='form-label'>
            <el-input placeholder="请输入姓名" v-model="editUserVo.nickName" />
          </td>
        </tr>
        <tr>
          <td class='form-label'>手机号：</td>
          <td class='form-label'>
            <el-input placeholder="请输入手机号" v-model="editUserVo.telephoneNo" />
          </td>
          <td class='form-label'>* 号码长度为11</td>
        </tr>
      </table>
      <div slot="footer">
        <el-button @click="dialogVisible.addUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserBtnClick">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import r from '../../utils/RequestUtil';
  import wxs from '../utils/WxsService'
  export default {
    name: 'user_2',
    data: function () {
      return {
        message: '',
        generateCount: 250,
        departmentList: [],
        dialogVisible: {
          addUserVisible: false,
          updateUserVisible: false,
          editUserVisible: false
        },
        queryUserVo: {
          nickName: '',
          telephoneNo: '',
          roleType: ''
        },
        addUserVo: {
          username: '',
          password: '',
          nickName: '',
          roleType: '',
          telephoneNo: '',
          departmentId: null
        },
        editUserVo: {
          username: '',
          password: '',
          nickName: '',
          roleType: '',
          telephoneNo: '',
          departmentId: null
        },
        updateUserVo: {
          id: '',
          nickName: '',
          telephoneNo: ''
        },
        dataList: [],
        page: {
          totalCount: 0
        },
        selectedItems: [],
      }
    },
    methods: {
      queryBtnClick: function () { //查询数据
        this.dataList = wxs.getUserInfo();
        this.dialogVisible.addUserVisible = false;
        this.page.totalCount = this.dataList.length;
      },
      addUserBtnClick: function () { //新增用户
        var exp = /1[3,5,9]{1}[0-9]{9}/;
        var expu = /[a-zA-Z]\d\S/;
        if (!exp.test(this.addUserVo.telephoneNo.trim()) || this.addUserVo.telephoneNo.trim().length != 11) {
          this.addUserVo.telephoneNo = '';
          this.$message.warning("电话号码格式错误！");
          return;
        } else this.addUserVo.telephoneNo.trim()
        if (this.addUserVo.nickName.trim().length <= 1) {
          this.$message.warning("姓名字符长度最小为2！");
          return;
        } else this.addUserVo.nickName.trim();
        if (!expu.test(this.addUserVo.username.trim())) {
          this.$message.warning("账户格式不正确！");
          return;
        } else if (this.addUserVo.username.trim().length <= 1) {
          this.$message.warning("账户最小为2个字符！");
          return;
        } else this.addUserVo.username.trim();
        if (this.addUserVo.departmentId.length <= 0) {
          this.$message.warning("请选择部门！");
          return;
        }
        if (this.addUserVo.password.trim().length <= 0) {
          this.$message.warning("请设置密码！");
          return;
        }
        this.addUserVo.departmentName = this.departmentList.filter((e) => {
          if (e.No === this.addUserVo.departmentId) {
            return e.name;
          }
        });
        let name = this.departmentList.filter((e) => {
          if (e.No === this.addUserVo.departmentId) {
            return e;
          }
        });
        this.addUserVo.departmentName = name[0].name;
        this.addUserVo.No = Date.now().toString();
        this.addUserVo.createTime = (new Date()).toLocaleString();
        this.addUserVo.roleType = "员工";
        this.addUserVo.status = '1';
        wxs.addUserInfo(this.addUserVo);
        this.dialogVisible.addUserVisible = false;
        this.dataList.push(this.addUserVo);
        //清空数据
        this.addUserVo.telephoneNo = '';
        this.addUserVo.nickName = '';
        this.addUserVo.username = '';
        this.addUserVo.departmentId = '';
        this.addUserVo.departmentName = '';
        this.addUserVo.password = '';
        this.addUserVo.createTime = '';
        setTimeout(() => {
          this.queryBtnClick();
        }, 100);
      },
      selectionChange: function (val) { //选择数据
        this.selectedItems = val.map(item => {
          return item.No;
        })
      },
      //修改
      handleEdit(index, rows) {
        this.dialogVisible.editUserVisible = true;
        this.editUserVo = rows[index]
      },
      editUserBtnClick() { //提交修改数据
        var exp = /1[3,5,9]{1}[0-9]{9}/;
        var expu = /[a-zA-Z]\d\S/;
        if (!exp.test(this.editUserVo.telephoneNo.trim()) || this.editUserVo.telephoneNo.trim().length != 11) {
          this.editUserVo.telephoneNo = '';
          this.$message.warning("电话号码格式错误！");
          return;
        } else this.editUserVo.telephoneNo.trim();
        if (!expu.test(this.editUserVo.nickName.trim()) || this.editUserVo.nickName.trim().length <= 1) {
          this.$message.warning("姓名字符长度最小为2！");
          return;
        } else this.editUserVo.nickName.trim();
        if (!expu.test(this.editUserVo.username.trim())) {
          this.$message.warning("账户格式不正确！");
          return;
        } else if (this.editUserVo.username.trim().length <= 1) {
          this.$message.warning("账户最小为2个字符！");
          return;
        } else this.editUserVo.username.trim();
        if (this.editUserVo.departmentId.length <= 0) {
          this.$message.warning("请选择部门！");
          return;
        }
        if (this.editUserVo.password.trim().length <= 0) {
          this.$message.warning("请设置密码！");
          return;
        }
        this.editUserVo.departmentName = this.departmentList.filter((e) => {
          if (e.No === this.editUserVo.departmentId) {
            return e.name;
          }
        });
        let name = this.departmentList.filter((e) => {
          if (e.No === this.editUserVo.departmentId) {
            return e;
          }
        });
        this.editUserVo.departmentName = name[0].name;
        wxs.editUserInfo(this.editUserVo, this.editUserVo.No);
        this.dialogVisible.editUserVisible = false;
        let index = 0;
        this.dataList.forEach((item, ind) => {
          if (item.departmentId === this.editUserVo.departmentId) {
            index = ind;
          }
        });
        this.dataList[index] = this.editUserVo;
      },
      deleteBtnClick: function () { //删除数据
        if (this.selectedItems.length == 0) {
          this.$message.warning("没有选择任何用户");
          return;
        }
        this.$confirm('确认删除用户？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.selectedItems //id
          wxs.deleteUserInfo(this.selectedItems);
          setTimeout(() => {
            this.queryBtnClick();
          }, 100);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    mounted: function () {
      this.departmentList = wxs.getDepartment();
      this.queryBtnClick();
    }
  }

</script>

<style></style>
